<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="static/js/scrollreveal.min.js"></script>
    <link rel="stylesheet" href="static/css/all.min.css" />
    <link rel="stylesheet" href="static/css/glide.core.min.css"/>
    <link rel="stylesheet" href="static/css/glide.theme.min.css"/>
    <link rel="stylesheet" href="static/css/style.css" />
    <title>彭蓉蓉同学生日快乐！</title>
    <script>
        window.onload = function(){
             setInterval("toggleSound()",1000);
        }
        function toggleSound() {
            var music = document.getElementById("bgm");//获取ID  
            if (music.paused) { //判读是否播放  
                music.paused=false;
                music.play(); //没有就播放 
            }    
        }
    </script>
</head>
<body>
    <audio id="bgm" autoplay preload="auto" loop>
        <source src="./static/1.mp3">
    </audio>
    <header>
        <div class="logo">彭蓉蓉20岁生日快乐</div>
        <nav>
            <a href="#home">主页</a>
            <a href="#service">我眼中的你</a>
            <a href="#company-activities">想对你说</a>
        </nav>
        <div class="burger">
            <div class="burger-line1"></div>
            <div class="burger-line2"></div>
            <div class="burger-line3"></div>
        </div>
    </header>
    <div id="home" class="glide">
        <div class="glide__track" data-glide-el="track">
            <div class="glide__slides">
                <div class="glide__slide">
                    <div class="slide-caption">
                        <h2>愿你的眼睛
                            只看得到笑容
                        </h2>
                        <h3>愿你留下每一滴眼泪
                            都让人感动</h3>
                            <h3>愿你以后每一场梦
                                不会一场空
                                万事胜意</h3>

                    </div>
                    <div class="backdrop"></div>
                    <img src="static/picture/happymusic.jpg" alt="" />
                </div>
                <div class="glide__slide">
                    <div class="slide-caption">
                        <h2>希望彭蓉蓉同学<br/>
                            天天开心 心想事成
                        </h2>
                        <h3>你的开心 <br/>
                            比对错更重要
                        </h3>
                    </div>
                    <div class="backdrop"></div>
                    <img src="static/picture/happyimp.jpg" alt="" />
                </div>
                <div class="glide__slide">
                    <div class="slide-caption">
                        <h2> 
                            下段旅程你一定要更快乐丰盛</h2>
                        
                    </div>
                    <div class="backdrop"></div>
                    <img src="static/picture/happybrd.jpg" alt="" />
                </div>
                
            </div>
        </div>
        <div class="glide__arrows" data-glide-el="controls">
            <button class="glide__arrow glide__arrow--left" data-glide-dir="<">
               &lt;   
            </button>
            <button class="glide__arrow glide__arrow--right" data-glide-dir=">">
               &gt;
               </button>
   
        </div>
        <div class="glide__bullets" data-glide-el="controls[nav]">
            <button class="glide__bullet data-glide-dir="0"></button>
            <button class="glide__bullet data-glide-dir="1"></button>
            <button class="glide__bullet data-glide-dir="2"></button>
        </div>
    </div>
    <div class="content-wrapper">

        <section id="service" class="service">
            <h2 class="title1">我眼中的你</h2>
            <div class="services" style="padding-top: 40px;">
                <div class="service-item">
                    <i class="fas fa-comments"></i>
                    <h4 class="service-title">细腻</h4>
                    <p class="service-content">虽然大大咧咧的，但是一个很细腻的小姑娘，可以考虑到别人的感受，为别人着想，还能感觉到别人的情绪波动。
                    </p>
                </div>
                <div class="service-item">
                    <i class="fas fa-comments"></i>
                    <h4 class="service-title">可爱</h4>
                    <p class="service-content">看起来有点子凶有点子高冷，但是接触下来感觉是挺可爱的一个女生，没有刚开始看起来那么高冷。
                    </p>
                </div>
                <div class="service-item">
                    <i class="fas fa-comments"></i>
                    <h4 class="service-title">上进</h4>
                    <p class="service-content">虽然总是说自己在摆烂，可是聊天下来觉得和认识的其他女生真的很不一样，有一股上进的心，对认真的事情一定会全力以赴。
                </div>
                <div class="service-item">
                    <i class="fas fa-comments"></i>
                    <h4 class="service-title">不较真儿</h4>
                    <p class="service-content">不拧巴，不较真儿，有事儿说事儿，不阴阳怪气儿，相处起来很舒服。
                    </p>
                </div>
                <div class="service-item">
                    <i class="fas fa-comments"></i>
                    <h4 class="service-title">靠谱</h4>
                    <p class="service-content">虽然爱玩，爱开玩笑，但是到正经事情上还是很拎得清，很靠谱的一女孩。
                    </p>
                </div>
                
            </div>
        </section>
        <div class="content-wrapper">
          
        <section class="data-section">
            <div class="data-piece">
                <i class="fas fa-code"></i>
                <div class="num">436</div>
                <div class="data-desc">天的好友</div>
            </div>
            <div class="data-piece">
                <i class="fas fa-award"></i>
                <div class="num">1</div>
                <div class="data-desc">次出去玩</div>
            </div>
            <div class="data-piece">
                <i class="fas fa-laugh-wink"></i>
                <div class="num">2</div>
                <div class="data-desc">次生日</div>
            </div>
            <div class="data-piece">
                <i class="fas fa-folder"></i>
                <div class="num">1030</div>
                <div class="data-desc">公里的距离</div>
            </div>
        </section>
        <section id="company-activities" class="company-activities">
            <h2 class="title1">想对你说</h2>
            <div class="activities">
                <div class="activity">
                    <div class="act-image-wrapper">
                        <img src="static/picture/1.jpg" alt="">
                    </div>
                    <div class="meta">
                        <p class="data-published">
                            <i class="far fa-calendar" style="margin-right: 5px;"></i>
                            2022年12月15日
                        </p>
                        <p class="comments">
                            
                        </p>
                    </div>
                    <h2 class="act-title">自信一点~</h2>
                    <article>我们每个人都是有优点和缺点的呀，之前和你聊天谈到你的优点，你说这都不算什么，可是有没有可能是因为你拥有这些优点所以你才会不去珍惜，有没有可能其实有些在你看来很容易的事情在别的女生看来是很难做到的，如果我们永远追逐于我们没有的东西那是多么痛苦的一件事啊。至少，在那些你觉得自己不够好的日子里，有一个人是真的很欣赏你的性格。</article>
                </div>
                <div class="activity">
                    <div class="act-image-wrapper">
                        <img src="static/picture/mingtianjian.jpg" alt="">
                    </div>
                    <div class="meta">
                        <p class="data-published">
                            <i class="far fa-calendar" style="margin-right: 5px;"></i>
                            2022年12月15日
                        </p>
                        <p class="comments">
                            
                        </p>
                    </div>
                    <h2 class="act-title">不要总是焦虑~</h2>
                    <article>不要总是焦虑，也不要总是因为自己焦虑而更焦虑~像余华老师说的“人往往就是会跟自己过不去。但这是积极的，因为这往往也意味着想变得更好，上坡的道路总是疲累的，直至找到出口“但是这个过程中我们可能总是会想得太多，做的太少而愈发焦虑，但是只要我们每天都在做，我们就没有荒废时光。</article>
                </div>
                <div class="activity">
                    <div class="act-image-wrapper">
                        <img src="static/picture/2.jpg" alt="">
                    </div>
                    <div class="meta">
                        <p class="data-published">
                            <i class="far fa-calendar" style="margin-right: 5px;"></i>
                            2022年12月15日
                        </p>
                        <p class="comments">
                            
                        </p>
                    </div>
                    <h2 class="act-title">我想说</h2>
                    <article>希望你能遇到一个对你好，满眼都是你的人</article>
                </div>
            </div>
        </section>  
    </div>
    <footer style="width: 100%;">
        <div class="footer-menus" style="text-shadow: 0 0 2px rgb(100,100,100);">
            <div class="contact-us">
                <p class="menu-title">关于这个网页</p>
                <p>
                    我做了好久好久啦，咱就是说，光遇这个钢琴也太难换了吧，<br/>
                    跑完六个图才能开启风暴眼，还得献祭呜呜呜，最开始以为<br/>
                    练曲是最难的，没想到原来钢琴是最难得的，照着b站现学<br/>
                    现卖还老是出bug，就是说，咱真的想不出哪份礼物<br/>
                    比这个更用心了，你就算不喜欢，也得给我装喜欢！
                </p>
            </div>
            <div class="service-menu footer-menu">
                <p class="menu-title">听听歌吧</p>
                <ul class="menu-items">
                    <li><a href="https://music.163.com/#/song?id=1884490658" target="blank">oz.</a></li>
                    <li><a href="https://music.163.com/#/song?id=1495058484" target="blank">茫</a></li>
                    <li><a href="https://music.163.com/#/song?id=1366216050" target="blank">这是我一生中最勇敢的瞬间</a></li>
                </ul>
            </div>
            <div class="service-menu footer-menu">
                <p class="menu-title">看看视频吧</p>
                <ul class="menu-items">
                    <li><a href="https://www.bilibili.com/video/BV1uf4y1C7LZ/?spm_id_from=333.337.search-card.all.click" target="blank">王一博</a></li>
                    <li><a href="https://www.bilibili.com/video/BV15Y4y177vg/?spm_id_from=333.337.search-card.all.click&vd_source=a83625921fafd037ffde5d49938f30bd" target="blank">原神</a></li>
                    <li><a href="https://www.bilibili.com/video/BV1oP4y1D7Wd/?vd_source=a83625921fafd037ffde5d49938f30bd" target="blank">光遇</a></li>

                </ul>
            </div>
            <p class="icp-info">A Gift for the 20th Birthday of prr</p>
            <p class="rights">Coding With ❤️ By ztx</p>
            <div class="scrollToTop">
                <a href="#">
                    <i class="fas fa-chevron-up"></i>
                </a>
            </div>
        </div>
    </footer>
    <script src="static/js/anime.min.js"></script>
    <script src="static/js/glide.min.js"></script>
    <!-- <script src="static/js/isotope.pkgd.min.js"></script> -->
    <script src="static/js/smooth-scroll.polyfills.min.js"></script>
    <script src="static/js/index.js"></script>
</body>
</html>